<template>
  <div>
    <dialog-content :dialogOptions="dialogOptions || (new Date().getTime())">
      <template slot="dialog-content_content">
        <form-content ref="loginInfoForm" :formOptions="formOptions" :formSource="formSource">
        </form-content>
      </template>
      <template slot="dialog-content_footer">
        <el-button :size="this.size" @click="dialogOptions.show = false">取 消</el-button>
      </template>
    </dialog-content>
  </div>
</template>

<script>
import { getLoginInfoApi } from '@/api/log'
import DialogContent from '@/components/common/dialog-content'
import FormContent from '@/components/common/form-content'
export default {
  components: {
    DialogContent, FormContent
  },
  props: {
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      dialogOptions: {
        title: '登录信息',
        show: false,
        modal: true,
        width: '27rem',
        height: '33rem',
        center: true
      },
      formOptions: {
        inline: true,
        labelPosition: 'right',
        labelWidth: '7rem',
        size: this.size
      },
      formSource: {
        operations: [
          { name: '登录账户', key: 'userName', type: 'text', width: '16rem', disabled: true },
          { name: '登录时间', key: 'createTime', type: 'datetime', width: '16rem', disabled: true },
          { name: '登录IP', key: 'ip', type: 'text', width: '16rem', disabled: true },
          { name: '登录地址', key: 'loginAddress', type: 'text', width: '16rem', disabled: true },
          { name: '登录设备', key: 'os', type: 'text', width: '16rem', disabled: true },
          { name: '浏览器版本', key: 'browser', type: 'text', width: '16rem', disabled: true },
          { name: '请求id', key: 'requestId', type: 'text', width: '16rem', disabled: true },
          { name: '请求方式', key: 'requestMethod', type: 'text', width: '16rem', disabled: true },
          { name: '登录来源', key: 'sourceTypeDesc', type: 'text', width: '16rem', disabled: true },
          { name: '登录状态码', key: 'businessStatus', type: 'text', width: '16rem', disabled: true },
          { name: '登录状态', key: 'businessStatusDesc', type: 'text', width: '16rem', disabled: true },
          { name: '失败原因', key: 'businessDescription', type: 'textarea', width: '16rem', disabled: true }
        ],
        ruleForm: {},
        rules: {}
      }
    }
  },
  methods: {
    init(id) {
      if (id !== undefined && id !== 0) {
        getLoginInfoApi(id).then(res => {
          this.formSource.ruleForm = res.data
          this.formSource.ruleForm.createTime = this.$time.formatDate(res.data.createTime, 'yyyy-MM-dd HH:mm:ss')
          if (res.data.country) {
            if (res.data.country === res.data.province) {
              this.formSource.ruleForm.loginAddress = res.data.country + res.data.city + res.data.isp
            } else if (res.data.province === res.data.city) {
              this.formSource.ruleForm.loginAddress = res.data.country + res.data.city + res.data.isp
            } else {
              this.formSource.ruleForm.loginAddress = res.data.country + res.data.province + res.data.city + res.data.isp
            }
          }

          this.formSource.operations.forEach(item => {
            if (res.data.businessStatus === 10000 && item.key === 'businessDescription') {
              item.show = false
              this.dialogOptions.height = '33rem'
            } else {
              item.show = true
              this.dialogOptions.height = '37rem'
            }
          })
        })
      } else {
        this.formSource.ruleForm = {
          id: '',
          createTime: '',
          ip: '',
          operatingSystem: '',
          browser: '',
          userName: '',
          error: '',
          loginAddress: '',
          sourceTypeDesc: '',
          businessStatusDesc: ''
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
